<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			html,
			body{
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			.wrap{
				width: 40px;
				height: 300px;
				border: 1px solid;
				margin: 100px auto;
				overflow: hidden;
			}
			.wrap > .inner{
				height: 600px;
				background-image: repeating-linear-gradient(-50deg, black 0px, black 10px, white 10px, white 20px);
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="inner">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var inner = document.querySelector(".wrap > .inner");
		var flag = 0;
		setInterval(function () {
			flag++;
			if (flag >= 300) {
				flag = 0;
			}
			inner.style.marginTop = -flag + "px";
		}, 1000 / 60);
	</script>
</html>
